import classnames from 'classnames'

import React from "react"
export default class Main extends React.Component {
    state = {
        isSelectedAll: false,
        curId: null,
        curContent: ''
    }
    updateDone = (idx) => {
        this.props.updateDone(idx)
    }

    del = (idx) => {
        this.props.del(idx)
    }

    showEdit = (item) => {
        this.setState({ 
            curId: item.id,
            curContent: item.content
         })
    }
    toggleSelectAll=(e) => {
        
        this.setState({
            isSelectedAll: e.target.checked
        })

        this.props.toggleSelectAll(e.target.checked)
    }
    handleKeyup = (e) => {
        console.log(e)
        // 判断
        if (e.keyCode === 27) {
          // 按了esc，取消修改
          this.setState({
            curId: '',
            curContent: '',
          })
        }
        if (e.keyCode === 13) {
          // 添加
          this.props.editTodo(this.state.curId, this.state.curContent)
          // 关闭
          this.setState({
            curId: '',
            curContent: '',
          })
        }
      }

    render () {
        console.log(this.props)
        const { list, type } = this.props

        let showList = list
        if(type === 'active') {
            showList = list.filter(item => !item.isDone)
        } else if(type === 'completed') {
            showList = list.filter(item => item.isDone)
        }

        return (
            <section className="main">
                <input id="toggle-all"
                className="toggle-all"
                type="checkbox"
                onChange={this.toggleSelectAll}
                checked={list.every(it=>it.isDone)}
                />
                <label htmlFor="toggle-all">Mark all as complete</label>
                <ul className="todo-list">
                    {showList.map((item,idx) => (
                        <li className={
                            classnames({
                                completed: item.isDone,
                                editing: item.id === this.state.curId
                            })
                            } key={item.id}>
                            <div className="view">
                                <input className="toggle"  type="checkbox"
                                onChange={()=>{this.updateDone(idx)}}
                                checked={item.isDone} />
                                <label onDoubleClick={()=>this.showEdit(item)}>{item.content}</label>
                                <button className="destroy" onClick={()=>this.del(idx)}></button>
                            </div>
                            <input className="edit"
                            value={this.state.curContent}
                            onKeyUp={this.handleKeyup}
                            onChange={(e)=>this.setState({curContent:e.target.value.trim()})} />
                        </li>
                    ))}
                </ul>
            </section>)
    }
}
